iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

用敏捷管理我跟 HTML&CSS 的 30 天親密接觸系列 第 11

|Day 11|從 HTML + CSS 開始

  • 分享至 

  • xImage
  •  

何謂 CSS 呢?從維基百科偷一點點介紹給大家看看

層疊樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表)是一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言,由W3C定義和維護。目前最新版本是CSS2.1,為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中。

說白一點,就是替你的 HTML 的這張素顏的臉化點妝,加些變化

❶ 標籤介紹

使用 CSS 前先跟大家說明<div> </div>標籤,DIV 可以解釋為區塊,用 DIV 標籤包起來的東西,瀏覽器會視為一個區塊,你可以將你的畫面分成很多區塊,並用 div 包起來,接著對各個區塊做 CSS 排版。

❷ CSS 小整理

用條列方式整理出幾個重點給大家

  • 不可以單獨使用,需與 HTML 共同協作。

  • <head> </head>之間用<style> </style>來寫 CSS,可對 HTML 做樣式的設定。

    • 會使用 CSS 選取器(CSS Selector)來選取想做樣式的區塊。

          <head>
          <meta charset="UTF-8">
          <title>no.11</title>
           <style>
            h1{
              color: red;
             }
          </style>
         </head>
      

      以上語法在瀏覽器的畫面如下圖

      https://ithelp.ithome.com.tw/upload/images/20190923/20120833yaeHxNveCy.png

  • 除了寫在 head 裡,也可以 寫在另外檔案, 再用標籤嵌入 css 檔案

        <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        </head>
    
    • 其中 「rel="stylesheet" type="text/css"」 所代表的意思,就是告訴瀏覽器要導入一個在外部的 css 檔案,透過 href 導入名為 style.css 的樣式檔案。

❸ 解析 CSS

h1{
  color: red;
   }
  • h1: 選取器。決定 HTML 裡什麼標籤會被影響接下來的設定(在這個範例中 h1 就是被改變的元素)
  • color: red;: 宣告(Declaration),就是要告訴 CSS 你要對 h1 做變紅色的改變。
  • color:屬性 (Properties),指定了這個原色的呈現樣貌
  • red:值(value),在冒號(:)之後,從眾多的可能樣式指定出一個出來。

❹ 次回預告

下回就來看更多 HTML+CSS 的搭配使用:)


上一篇
|Day 10| 寫好 title 和 discription ,網站流量跟著來
下一篇
|Day 12| CSS 常用語法 - 認識顏色
系列文
用敏捷管理我跟 HTML&CSS 的 30 天親密接觸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言